<template>
  <div class='login-container'>
    <div class='login-card'>
      <div class='login-tips'>
        <h3 class='login-left-title'>{{ loginTitle }}</h3>
        <div class='tips-item'>
          <img src='@/assets/images/login1.svg' alt='操作简单'>
          <div>
            <p class='one'>操作简单</p>
            <p>无需繁琐配置，一键即可快速拥有个人博客</p>
          </div>
        </div>
        <div class='tips-item'>
          <img src='@/assets/images/login2.svg' alt='聚合碎片数据'>
          <div>
            <p class='one'>聚合碎片数据</p>
            <p>深度挖掘数据价值，提升体验促进转化</p>
          </div>
        </div>
        <div class='tips-item'>
          <img src='@/assets/images/login3.svg' alt='丰富插件系统'>
          <div>
            <p class='one'>丰富功能系统</p>
            <p>快速的在不同系统中切换，功能齐全，资源丰富</p>
          </div>
        </div>
      </div>
      <Form status-icon :model='loginForm' :rules='rules' ref='ruleForm'
            class='el-form el-form--large el-form--label-right form'>
        <FormItem prop='username' size='large'>
          <p class='label'>登录账号</p>
          <Input
            class='login-username'
            v-model='loginForm.username'
            prefix='ios-contact'
            placeholder='用户名'
            size='large'
            @keyup.enter.native='login' />
        </FormItem>
        <FormItem prop='password' size='large'>
          <p class='label'>登录密码</p>
          <Input
            type='password'
            class='login-password'
            v-model='loginForm.password'
            prefix='ios-lock'
            autocomplete='off'
            placeholder='密码'
            size='large'
            password
            @keyup.enter.native='login' />
        </FormItem>
        <FormItem size='large'>
          <Button type='primary' @click='login' class='login-btn'>登录
            <i class='el-icon-loading' v-if='loginLoading' style='margin-left: 0.5rem'></i>
          </Button>
        </FormItem>
        <div class='social-message'>
          <div class='line'></div>
          <p class='message'>第三方账号登录</p>
          <div class='line'></div>
        </div>
        <div class='social-icons'>
          <div aria-label='Log in with Google' class='icon' @click='socialClick'>
            <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' class='w-5 h-5 fill-current'>
              <path
                d='M16.318 13.714v5.484h9.078c-0.37 2.354-2.745 6.901-9.078 6.901-5.458 0-9.917-4.521-9.917-10.099s4.458-10.099 9.917-10.099c3.109 0 5.193 1.318 6.38 2.464l4.339-4.182c-2.786-2.599-6.396-4.182-10.719-4.182-8.844 0-16 7.151-16 16s7.156 16 16 16c9.234 0 15.365-6.49 15.365-15.635 0-1.052-0.115-1.854-0.255-2.651z'></path>
            </svg>
          </div>
          <div aria-label='Log in with GitHub' class='icon' @click='socialClick'>
            <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' class='w-5 h-5 fill-current'>
              <path
                d='M16 0.396c-8.839 0-16 7.167-16 16 0 7.073 4.584 13.068 10.937 15.183 0.803 0.151 1.093-0.344 1.093-0.772 0-0.38-0.009-1.385-0.015-2.719-4.453 0.964-5.391-2.151-5.391-2.151-0.729-1.844-1.781-2.339-1.781-2.339-1.448-0.989 0.115-0.968 0.115-0.968 1.604 0.109 2.448 1.645 2.448 1.645 1.427 2.448 3.744 1.74 4.661 1.328 0.14-1.031 0.557-1.74 1.011-2.135-3.552-0.401-7.287-1.776-7.287-7.907 0-1.751 0.62-3.177 1.645-4.297-0.177-0.401-0.719-2.031 0.141-4.235 0 0 1.339-0.427 4.4 1.641 1.281-0.355 2.641-0.532 4-0.541 1.36 0.009 2.719 0.187 4 0.541 3.043-2.068 4.381-1.641 4.381-1.641 0.859 2.204 0.317 3.833 0.161 4.235 1.015 1.12 1.635 2.547 1.635 4.297 0 6.145-3.74 7.5-7.296 7.891 0.556 0.479 1.077 1.464 1.077 2.959 0 2.14-0.020 3.864-0.020 4.385 0 0.416 0.28 0.916 1.104 0.755 6.4-2.093 10.979-8.093 10.979-15.156 0-8.833-7.161-16-16-16z'></path>
            </svg>
          </div>
        </div>
      </Form>
    </div>
    <footer class='admin-footer'>
      <div class='footer-item'>
        Copyright © 2023-2099 {{ webSite }}版权所有.
      </div>
    </footer>
  </div>
</template>

<script>
import { generaMenu } from '@/assets/js/menu'
import { Encrypt } from '@/util/bcryptUtil'

export default {
  created() {
    this.init()
  },
  data: function() {
    return {
      loginLoading: false,
      loginForm: {
        username: '',
        password: ''
      },
      rules: {
        username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
        password: [{ required: true, message: '密码不能为空', trigger: 'blur' }]
      },
      loginTitle: '',
      domainLogo: '/favicon.ico',
      webSite: ''
    }
  },
  methods: {
    login() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.loginLoading = true
          const that = this
          let param = new URLSearchParams()
          param.append('username', that.loginForm.username)
          param.append('password', Encrypt(that.loginForm.password))
          that.axios.post('/api/users/login', param).then(({ data }) => {
            if (data.flag) {
              that.$store.commit('login', data.data)
              generaMenu()
              that.$message.success('登录成功')
              that.$router.push({ path: '/' })
              this.loginLoading = false
            } else {
              that.$message.error(data.message)
              this.loginLoading = false
            }
          })
        } else {
          this.loginLoading = false
          return false
        }
      })
    },
    socialClick() {
      this.$message({
        message: '暂未适配第三方',
        type: 'warning'
      })
    },
    init() {
      if (!localStorage.getItem('icon') || !localStorage.getItem('title')) {
        this.getSite()
      } else {
        this.loginTitle = localStorage.getItem('title') + ' - 运营后台'
        window.document.title = localStorage.getItem('title') + ' - 运营后台'
        this.webSite = localStorage.getItem('title')
        this.setFavicon(localStorage.getItem('icon'))
      }
    },
    getSite() {
      this.axios.get('/api/').then(({ data }) => {
        let siteName = data.data.websiteConfigDTO.name
        let sitIcon = data.data.websiteConfigDTO.favicon
        localStorage.setItem('title', siteName)
        localStorage.setItem('icon', sitIcon)
        this.setFavicon(sitIcon)
        window.document.title = siteName + ' - 运营后台'
        this.loginTitle = siteName + ' - 博客运营后台'
        this.webSite = siteName
      })
    },
    setFavicon(ico) {
      let link =
        document.querySelector('link[rel*=\'icon\']') ||
        document.createElement('link')
      link.type = 'image/x-icon'
      link.href = ico
      link.rel = 'shortcut icon'
      document.getElementsByTagName('head')[0].appendChild(link)
    }
  }
}
</script>

<style scoped>
:deep(.ivu-form-item-content) {
    font-size: 12px;
}

.social-message {
    display: flex;
    align-items: center;
    padding-top: 1rem;
}

.line {
    height: 1px;
    flex: 1 1 0;
    background-color: rgb(126, 138, 159);
}

.social-message .message {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: rgba(156, 163, 175, 1);
}

.social-icons {
    display: flex;
    justify-content: center;
    cursor: pointer;
}

.social-icons .icon {
    border-radius: 0.125rem;
    padding: 0.75rem;
    border: none;
    background-color: transparent;
    margin-left: 8px;
}

.social-icons .icon svg {
    height: 1.25rem;
    width: 1.25rem;
    fill: #949ad4;
}

.login-btn {
    background: linear-gradient(135deg, #FF5C58 0%, #fa6419 100%);
    height: 40px;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #fff;
    width: 100%;
    text-align: center;
    transition: 0.35s;
}

.login-container {
    width: 100%;
    height: 100vh;
    position: relative;
    background: url(@/assets/images/background.png) no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-container .label {
    font-size: 16px;
    line-height: 19px;
    margin-bottom: 1rem;
    width: 100%;
}

.login-card {
    display: flex;
    height: 496px;
    gap: 120px;
}

.login-tips {
    width: 400px;
    height: 100%;
    padding: 40px 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 50px;
    font-family: inherit;
}

.login-left-title {
    font-size: 28px;
    font-family: inherit;
    letter-spacing: 2px;
    margin: 0;
    line-height: 40px;
    vertical-align: bottom;
    color: #333333;
}

.login-tips .tips-item {
    display: flex;
    align-items: center;
    gap: 0 20px;
}

.login-tips .tips-item img {
    width: 60px;
}

.login-tips .tips-item div {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
    color: #455f7e;
}

.tips-item p.one {
    color: #000;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    margin-top: 4px;
}

.tips-item p {
    line-height: 20px;
    font-family: inherit;
    margin: 0;
}

.login-container .form {
    background-color: #ffffff7d;
    border-radius: 8px;
    padding: 48px 12px 12px;
    width: 400px;
    height: 496px;
    box-sizing: border-box;
    font-size: .875rem;
}

.login-card button {
    margin-top: 2rem;
    width: 100%;
}

.admin-footer {
    position: fixed;
    bottom: 2rem;
    text-align: center;
    width: 100%;
}

.footer-item {
    color: rgba(0, 0, 0, .45);
    font-size: 12px;
}
</style>
